<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt / inputEx</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/container/assets/container.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>

<!-- InputEx -->
<script src="../../lib/inputex/js/inputex.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/Field.js"  type='text/javascript'></script>

<script type="text/javascript" src="../../js/util/inputex/WirableField-beta.js"></script>

<script src="../../lib/inputex/js/Group.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/StringField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/EmailField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/UrlField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/ListField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/CheckBox.js"  type='text/javascript'></script>

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../../js/WireIt.js"></script>
<script type="text/javascript" src="../../js/CanvasElement.js"></script>
<script type="text/javascript" src="../../js/Wire.js"></script>
<script type="text/javascript" src="../../js/Terminal.js"></script>
<script type="text/javascript" src="../../js/util/DD.js"></script>
<script type="text/javascript" src="../../js/util/DDResize.js"></script>
<script type="text/javascript" src="../../js/Container.js"></script>
<script type="text/javascript" src="../../js/Layer.js"></script>

<!-- WireIt inputex-->
<script type="text/javascript" src="../../js/util/inputex/FormContainer-beta.js"></script>

<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />


<style>
body {
	font-size: 10px;
}
div.WireIt-Container {
	width: 435px;
	height: 100px;
}
div.WireIt-InputExTerminal {
	float: left;
	width: 21px;
	height: 21px;
	position: relative;
}
div.WireIt-InputExTerminal div.WireIt-Terminal {
	top: -3px;
	left: -7px;
}
div.inputEx-Group div.inputEx-label {
	width:100px;
}
</style>

 </head>
 <body>
	
	<script>

	YAHOO.util.Event.addListener(window, 'load', function() {
		// Required for the tooltips
		YAHOO.inputEx.spacerUrl = "../../lib/inputex/images/space.gif";

		// Example 1
	   var demoLayer = new WireIt.Layer({layerMap: false});
			
		 demoLayer.setWiring({
			containers: [
		 		{
					position:[280,140],
					xtype: "WireIt.FormContainer",
					fields: [ 
						{type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
						{inputParams: {label: 'Firstname', name: 'firstname', required: true } }, 
						{inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont'} }, 
						{type:'email', inputParams: {label: 'Email', name: 'email', required: true}}, 
						{type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}}, 
						{type:'url', inputParams: {label: 'Website', name:'website'}} 
					],
					legend: 'Tell us about yourself...'
		 		},
				{
					position:[500,140],
					xtype: "WireIt.FormContainer",
					fields: [
					    {inputParams: {label: 'Firstname', name: 'firstname' }},
					    {inputParams: {label: 'Lastname', name: 'lastname' }},
				      { inputParams: {label: 'Title', name: 'title' } }
				   ],
					legend: 'Hello there'
		 		}
			]
		});

	});
	</script>
 </body>
</html>